<template>
  <!-- <div style="text-align:center,background-color:#6699cc;height:75px;">
    <div style="width=!00%;height:20px"></div>
    <p class="h4" align="center" style="vertical-align:middle;"><b>{{user.name}}的手机状态</b></p>
  </div> -->
  <tools-page :need-back='false' title="手机状态"></tools-page>
  <div class="">
      <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 col-xs-offset-0 col-sm-offset-0 col-md-offset-3 col-lg-offset-3 toppad" >
          <div class="panel panel-info">
            <div class="panel-body">
              <div class="row">
                <div class=" col-md-12 col-lg-12 ">
                  <table class="table table-user-information table table-striped">
                    <tbody>
                      <tr>
                        <td>姓名：</td>
                        <td><span>{{user.name}}&nbsp;&nbsp;&nbsp;&nbsp;
                        <!--<button class="btn btn-warning" @click="verifyChecker">身份验证</btton>-->
                        </span></td>
                      </tr>
                      <tr>
                        <td>经度：</td>
                        <td>{{data.f_longitude=='0'?'-':data.f_longitude}}</td>
                      </tr>
                      </tr>
                        <td>纬度：</td>
                        <td>{{data.f_latitude=='0'?'-':data.f_latitude}}</td>
                      </tr>
                      <tr>
                        <td>海拔：</td>
                        <td>{{data.f_altitude=='0'?'-':data.f_altitude}}米</td>
                      </tr>
                      </tr>
                        <td>当日流量：</td>
                        <td>{{data.f_traffic}}K</td>
                      </tr>
                      <tr>
                        <td>信号强度：</td>
                        <td>{{data.f_signal_strength}}</td>
                      </tr>
                      </tr>
                        <td>电池电量：</td>
                        <td>{{data.f_battery_level}}%</td>
                      </tr>
                      <tr>
                        <td>剩余空间：</td>
                        <td>{{data.f_internal_quote}}M</td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div style="height:50px;"></div>
  </div>
</template>

<script>
import Vue from 'vue'
import * as Util from '../Util'

export default {
  title: '电话状态',
  props: ['ro'],
  data() {
    return {
      user: Vue.user,
      data: {},
      timerEnabled: true,
      timer: null,
      role: ''
    }
  },
  methods: {
    mute: function() {
      HostApp.mute()
    },
    verifyChecker() {
      this.timerEnabled = false
      this.$goto('checker-avarta', {userid: this.user.id}, 'self', this.enableTimer)
    },
    enableTimer(param) {
      this.timerEnabled = true
      this.updateState()
    },
    askForLeave() {

    },
    updateState() {
      if(!this.timerEnabled) {
        return
      }
      if(Vue.android)
        this.$set('data', HostApp.getPhoneStatus(this.user.id).result)
        this.data.f_longitude = this.data.f_longitude.substring(0,this.data.f_longitude.indexOf('.') + 3)
        this.data.f_latitude = this.data.f_latitude.substring(0,this.data.f_latitude.indexOf('.') + 3)
      console.log('Routinely update in progress......')
      this.timer = window.setTimeout(this.updateState, Vue.interval)
      // let that = this
      // this.$post(Vue.url + 'sql/查找登录用户信息', {data:{userid: this.user.id}}, {resolveMsg: null, rejectMsg: '提取数据出错，请检查网络！'}).then(
      //   (response) => {
      //     this.$set('data', response.data[0])
      //     window.setTimeout(this.updateState, 2000)
      //   }
      // ).catch(
      //   (response)  => {
      //     this.$set('data', response.statusText)
      //     window.setTimeout(this.updateState, 2000)
      //   }
      // )
    }
  },
  ready() {
    this.$set('role', this.ro)
    this.updateState()
  },
  destroyed() {
    this.timerEnabled = false
    if(this.timer) {
      console.log('destroying timer...')
      window.clearTimeout(this.timer)
    }
  },
}
</script>
